<template>
  <div class="container">
    <van-swipe @change="onChange">
      <van-swipe-item>
        <img v-bind:src="showShopInList.goods_img" alt=""
      /></van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
      </template>
    </van-swipe>
  </div>
  <div class="price">
    <h4 class="now">{{ showShopInList.shop_price_formated }}</h4>
    <p class="line">{{ showShopInList.market_price_formated }}</p>
    <p class="font">已售出{{ showShopInList.sales_volume }}件</p>
    <Dialog class="send"></Dialog>
  </div>
  <div class="name">
    <p>{{ showShopInList.goods_style_name }}</p>
  </div>
  <div
    class="vip-container"
    v-if="showShopInList.membership_card_discount_price_formated"
  >
    <div class="vip">
      <!-- <img src="" alt="" /> -->
      <span>
        高级VIP享超值优惠价{{
          showShopInList.membership_card_discount_price_formated
        }}
      </span>
      <div class="button">
        立即开通
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>
<script>
import Dialog from './Dialog'
export default {
  components: {
    Dialog,
  },
  mounted() {
    this.getUrl()
    this.getlop(this.resObj.goods_id)
  },
  computed: {
    showShopInList() {
      return this.$store.state.shopIn.ShopInList
    },
  },
  data() {
    return {
      current: 0,
      resObj: {},
    }
  },
  methods: {
    onChange(index) {
      this.current = index
    },
    getlop(goods_id) {
      this.$store.dispatch({
        type: 'getInList',
        goods_id,
      })
    },
    getUrl() {
      const strParam = location.href.split('?', 2)[1]
      strParam.split('&').forEach((param) => {
        let arr = param.split('=')
        let key = arr[0]
        let val = arr[1]
        this.resObj[key] = val
      })
      return this.resObj
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  background: #fff;
  //   width: 100%;
  img {
    width: 360px;
    z-index: 10;
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
}
.price {
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 14px;

  .now {
    margin: 0;
    padding: 11px;
    font-size: 22px;
    color: red;
  }
  .line {
    text-decoration: line-through;
    color: #999;
  }
  .font {
    color: #999;
  }
  p {
    padding: 0;
    margin: 0;
  }
  .send {
    margin-left: 70px;
  }
}
.name {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0 10px;
  color: #000;
}
.vip-container {
  display: flex;
  align-content: center;
  justify-content: center;
  .vip {
    font-size: 1.4rem;
    background: RGB(244, 244, 244);
    display: flex;
    align-content: center;
    justify-content: space-around;
    margin: 0;
    width: 90%;
    padding: 10px 0;
    border-radius: 15px;
    span {
      margin: 0;
      padding: 0;
    }
    .button {
      background: #000;
      border-radius: 6px;
      color: #e3c49e;
      font-size: 14px;
      padding-left: 4px;
    }
  }
}
</style>
